<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>NeverGetMe</title>
    <link rel="shortcut" th:href="@{/icon/java.svg}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>
<div th:replace="header::html"></div>
<div class="container mt-3" style="margin-top: 10px">
    <div class="row" id="myInformation">
        <div class="col-2">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
                   href="#list-home" role="tab" aria-controls="home">个人资料</a>
                <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list"
                   href="#list-messages" role="tab" aria-controls="messages">我的消息</a>
            </div>
        </div>
        <div class="col-10">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                    <div class="media">
                        <img src="" class="align-self-start" alt="" id="MyCover">
                        <div class="media-body">
                            <form>
                                <div class="form-group">
                                    <label for="MyEmail">Email</label>
                                    <input type="email" class="form-control" id="MyEmail" placeholder="Email" readonly>
                                    <div class="invalid-feedback">
                                        请输入正确的Email,不要使用被别人注册过的email
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="MyUserName">Username</label>
                                    <input type="text" class="form-control" id="MyUserName" readonly>
                                    <div class="invalid-feedback">
                                        用户名长度小于10
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="MyUserName">telephone</label>
                                    <input type="text" class="form-control" id="MyTelephone" readonly>
                                    <div class="invalid-feedback">
                                        输入正确的号码
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...
                </div>
            </div>
        </div>
    </div>
    <div id="otherInformation">
        <div class="media">
            <img src="" class="align-self-start" alt="" id="OtherCover">
            <div class="media-body">
                <form>
                    <div class="form-group">
                        <label for="MyEmail">Email</label>
                        <input type="email" class="form-control" id="OtherEmail" placeholder="Email" readonly>
                        <div class="invalid-feedback">
                            请输入正确的Email,不要使用被别人注册过的email
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="MyUserName">Username</label>
                        <input type="text" class="form-control" id="OtherUserName" readonly>
                        <div class="invalid-feedback">
                            用户名长度小于10
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="MyUserName">telephone</label>
                        <input type="text" class="form-control" id="OtherTelephone" readonly>
                        <div class="invalid-feedback">
                            输入正确的号码
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer::html"></div>
<script th:src="@{/myjs/header.js}"></script>
<script th:src="@{/myjs/addsvg.js}"></script>
<script th:src="@{/myjs/websocket.js}"></script>

<script th:inline="javascript">
    var userID=[[${CurrentUserID}]];
</script>
<script>
    readUserInfo();
    function setUserInfo(data,other){
        if(other){
            $("#OtherCover").attr('src',data.image);
            $("#OtherEmail").attr('value',data.email);
            $("#OtherUserName").attr('value',data.username);
            if(data.telephone)
                $("#OtherTelephone").attr('value',data.telephone);
        }else{
            $("#MyCover").attr('src',data.image);
            $("#MyEmail").attr('value',data.email);
            $("#MyUserName").attr('value',data.username);
            if(data.telephone)
                $("#MyTelephone").attr('value',data.telephone);
        }

    }
    $(document).ready(function () {
        console.log(userID);
        if(userID){
            $("#myInformation").hide();
            $.post("/user/getUserInfoById",{
                userId:userID
            },function (data,status) {
                if(data.id)
                    setUserInfo(data,true);
            });
        }else{
            $("#otherInformation").hide();
            $.post("/getCurrentUser",{},function (data,status) {
                if(data.id){
                    setUserInfo(data,false);
                }
            });
            $.post("/user/getUserSystemMessage",{},function (data,status) {
                showSystemMessage(data);
            })
        }
        let websocket=initWebSocket();
    });
    function showSystemMessage(data) {
        var appendHtml='';
        $("#list-messages").empty();
        for(i in data){
            var msg=data[i];
            appendHtml+='<div class="alert alert-primary" role="alert">\n' +
                '<a target="_blank" href="/article/showArticle/'+msg['url']+'">'+msg['content']+'</a>'+
                '</div>';
        }
        $("#list-messages").append(appendHtml);
    }
</script>
</body>
</html>